<template>

    <div class="slide-nav" :class="[containerClass, contentPosition]">
        <div class="slide-nav-item-wrap" :class="[wrapClass]">
            <div v-for="(navigation, index) in navigations"
                :id="navigation.value"
                :ref="navigation.value"
                :key="index"
                class="slide-nav-item"
                :class="[{selected: value == navigation.value}, itemClass]"
                @click="onClick(navigation.value)">
                {{navigation.text}}
            </div>
            <div v-if="navigations && navigations.length > 0 && value != null && value != ''"
                class="slide-nav-indicator"
                :class="[indicatorClass]"
                :style="{left: (selectedIndex * percentage) + '%'}">
            </div>
        </div>
    </div>

</template>
<script lang="ts">
import {
    isUndef,
} from '@/lib/utils';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

/**
 * 使用v-model绑定数据
 *
 * @input(index) 点击事件，其中index是navigations的索引
 */
@Component({
    name: 'SlideNav',
})
export default class SlideNav extends Vue {
    /**
     * 所有导航内容，需要包含value和text
     */
    @Prop({
        required: true,
        type: Array,
        default() {
            return [];
        },
    })
    public navigations: any;

    /**
     * 所传入的值
     */
    @Prop({
        type: [ String, Number ],
    })
    public value: any;

    /**
     * 容器样式类
     */
    @Prop({
        type: [ Object, Array ],
    })
    public containerClass: any;

    /**
     * 包裹容器类
     */
    @Prop({
        type: [ Object, Array ],
    })
    public wrapClass: any;

    /**
     * item样式类
     */
    @Prop({
        type: [ Object, Array ],
    })
    public itemClass: any;

    /**
     * indicator样式类
     */
    @Prop({
        type: [ Object, Array ],
    })
    public indicatorClass: any;

    /**
     * 内容位置，可以是 left/center/right
     */
    @Prop({
        type: String,
        default: 'center',
    })
    public contentPosition: any;

    /**
     * 是否触发scrollIntoView方法
     */
    @Prop({
        type: Boolean,
        default: true,
    })
    public isScrollIntoView: any;

    /**
     * 移动的距离
     */
    public get percentage() {
        if (isUndef(this.navigations) || this.navigations.length === 0) {
            return 0;
        } else {
            return ((1 / this.navigations.length) * 100).toFixed(2);
        }
    }

    /**
     * 所选择的index
     */
    public get selectedIndex() {
        let result = 0;
        this.navigations.forEach((navigation: any, index: any) => {
            if (navigation.value === this.value) {
                result = index;
            }
        });
        return result;
    }

    /**
     * 处理value，暂时使用scrollIntoView，让tab进入到parent中
     */
    @Watch('value')
    public onValueChange(val: any) {
        if (this.isScrollIntoView) {
            const el = this.$refs[val];
            el && el[0] && el[0].scrollIntoView && el[0].scrollIntoView();
        }
    }

    /**
     * 点击选项
     */
    public onClick(value: any) {
        this.$emit('input', value);
    }

    public mounted() {
        if (this.isScrollIntoView) {
            const el = this.$refs[this.value];
            el && el[0] && el[0].scrollIntoView && el[0].scrollIntoView();
        }
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

@nav-bar-width: 87px; // 18 * 3 + 20
@nav-bar-height: 52px;
@nav-bar-line-height: 40px;
@nav-bar-font-size: 16px;
@nav-bar-font-size-large: 18px;
@nav-bar-padding-top: (@nav-bar-height - @nav-bar-line-height) / 2;

.slide-nav {
    // padding-top: @nav-bar-padding-top;
    position: relative;
    font-size: @nav-bar-font-size;
    line-height: @nav-bar-line-height;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    &.center {
        text-align: center;
    }
    &.left {
        text-align: left;
    }
    &.right {
        text-align: right;
    }
    .slide-nav-item-wrap {
        position: relative;
        display: inline-block;
        text-align: center;
    }
    .slide-nav-item {
        display: inline-block;
        width: @nav-bar-width;
        padding: 0 10px;
        padding-top: @nav-bar-padding-top;
        padding-bottom: @nav-bar-padding-top;
        font-size: @nav-bar-font-size;
        line-height: @nav-bar-line-height;
        color: black;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        &.selected {
            color: @color-red;
        }
    }
    .slide-nav-indicator {
        position: absolute;
        display: inline-block;
        bottom: 0;
        width: @nav-bar-width + 20px;
        border-left: 1px solid @white-color;
        border-left-width: 10px;
        border-right: 1px solid @white-color;
        border-right-width: 10px;
        height: 2px;
        background-color: @color-red;
        transition: left 0.3s;
        box-sizing: border-box;
    }
}

</style>
